<template>
	<view class="base-img">
		<image :src='src' @load='loadImg' :class="[imgLoaded ? 'imgAnt':'']" :mode="mode" @error="imgError()" lazy-load="true"></image>
		<view class="loading-bg" v-if='!imgLoaded'>
			<!-- <uni-icons type='image' size="40" color='#eee'></uni-icons> -->
		</view>
		<view class="err-img" v-if='imgErr'>
			<image src="/static/loadfail.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"base-img",
		props:{
			src:{
				type:String,
				default:''
			},
			isPoster:{
				type:Boolean,
				default:false
			},
			mode:{
				type:String,
				default:'aspectFill'
			}
		},
		data() {
			return {
				imgLoaded:false,
				imgErr:false,
			};
		},
		methods:{
			loadImg(e){
				if(e){
					this.imgLoaded = true;
				}
			},
			imgError(){
				this.imgLoaded = false;
				this.imgErr = true;
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.base-img{
		width:100%;
		height: 100%;
		position: relative;
		image{
			width: 100%;
			height: 100%;
			opacity: 0.2;
			position: relative;
			z-index: 2;
		}
	}
	.imgAnt{
		opacity: 1 !important;
		transition-duration: 1s;
		transition-property: opacity;
	}
	.loading-bg{
		width:100%;
		height: 100%;
		position: absolute;
		left:0;
		top:0;
		z-index:1;
		background:#f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.err-img{
		width:100%;
		height: 100%;
		position: absolute;
		left:0;
		top:0;
		z-index:2;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 50rpx;
			height: 50rpx;
			opacity: 1;
		}
	}
	
</style>